.modal__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: $z-index-modal;
  background-color: rgba($color-neutral-700, 0.16);
}

.modal__box {
  @extend .box;

  position: relative;
  margin: 40px auto;
  max-width: 660px;
  background-color: $white;
  border-radius: 6px;

  &.modal__box--with-sidebar {
    display: flex;
    padding: 0;
    max-width: 860px;
  }

  &.modal__box--full-screen {
    @include absolute(20px);

    max-width: none;
    margin: 0;
    padding: 0;
  }

  &.modal__box--full-height {
    height: calc(100% - 80px);
  }

  &.modal__box--small {
    max-width: 520px;
  }

  &.modal__box--tiny {
    max-width: 320px;
    padding: 15px;
  }

  .box__title {
    margin-top: 0;
  }
}

.modal__box-sidebar {
  position: relative;
  background-color: $color-neutral-50;
  flex: 0 0;

  &.modal__box-sidebar--scrollable {
    overflow-y: auto;
  }

  &.modal__box-sidebar--left {
    flex-basis: 200px;
    border-right: 1px solid $color-neutral-200;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  &.modal__box-sidebar--right {
    flex-basis: 300px;
    border-left: 1px solid $color-neutral-200;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}

.modal__box-content {
  position: relative;
  width: 100%;
  padding: 32px 40px;
  min-width: 0;
  flex: 1;

  &.modal__box-content--scrollable {
    overflow-y: auto;
  }
}

.modal__close {
  @include absolute(20px, 20px, auto, auto);

  font-size: 20px;
  color: $color-neutral-400;

  &:hover {
    color: $color-neutral-800;
  }
}

.modal__head {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: solid 1px $color-neutral-200;
}
